<!-- 车辆详情 -->
<template>
  <div
    class="dashboard-container vehicle-detail"
  >
    <el-card
      class="el-card"
    >
      <el-menu
        mode="horizontal"
        :default-active="activeIndex"
      >
        <el-menu-item
          index="1"
          @click="information"
        >基本信息</el-menu-item>
        <el-menu-item
          index="2"
          @click="getLicenseDetail"
        >行驶证信息</el-menu-item>
      </el-menu>
      <!-- 基本信息 -->
      <div
        v-if="changeShow"
        :class=" isShowInput ? '' : 'base-info'"
      >
        <el-form
          ref="editDataList"
          :inline="true"
          class="el-form"
          :model="detailForm"
          :rules="rules"
        >
          <el-form-item
            label="车辆编码:"
            prop="id"
          >
            <el-input
              v-model="detailForm.id"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item
            label="车牌号码:"
            prop="licensePlate"
          >
            <el-input
              v-model="detailForm.licensePlate"
              :disabled="showWrite"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="车型名称:"
            prop="truckTypeName"
          >
            <el-select
              ref="truckType"
              v-model="detailForm.truckTypeId"
              clearable
              placeholder="请选择"
              :disabled="showWrite"
            >
              <el-option
                v-for="item in formData"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="车辆体积:"
            prop="allowableVolume"
          >
            <el-input
              v-model="detailForm.allowableVolume"
              :disabled="showWrite"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="车辆载重:"
            prop="allowableLoad"
          >
            <el-input
              v-model="detailForm.allowableLoad"
              :disabled="showWrite"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="GPSID:"
            prop="deviceGpsId"
          >
            <el-input
              v-model="detailForm.deviceGpsId"
              :disabled="showWrite"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="图片信息:"
            style="width: 1200px;"
          >
            <!-- <span v-if="!imgUrlList.length">{{ imgUrlList.length }}</span>
          <span v-else>456</span> -->
            <span v-if="!imgUrlList.length">
              <img
                src="../../assets/car-example1.png"
                alt=""
                style="width: 148px;"
              >
              <img
                src="../../assets/car-example2.png"
                alt=""
                style="width: 148px;"
              >
            </span>
            <span v-else>
              <img
                width="148px"
                :src="detailForm.picture"
                alt=""
                style="display: inline-block;"
              >
              <img
                width="148px"
                :src="detailForm.picture"
                alt=""
                style="display: inline-block;"
              >
            </span>
            <div style="margin-left: auto; display: flex; align-items: flex-start">
              <el-upload
                v-show="show"
                action=""
                list-type="picture-card"
                :disabled="disabled"
                :limit="maxNum"
                :before-upload="beforeAvatarUpload"
                :http-request="uploadCarImage"
                class="elUpload"
              >
                <i
                  slot="default"
                  class="el-icon-upload2"
                ></i>
                <!-- <div
              slot="file"
              slot-scope="{file}"
            >
              <img
                class="el-upload-list__item-thumbnail"
                :src="file.url"
                alt=""
              >
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
                  @click="handlePictureCardPreview(file)"
                >
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleDownload(file)"
                >
                  <i class="el-icon-download"></i>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleRemove(file)"
                >
              </span>
              <i class="el-icon-delete"></i>
              </span>
            </div> -->
              </el-upload>
            </div>
            <div
              v-show="show"
              style="color: #bac0cd; margin-top: 20px;"
            >注：图片大小不超过5M；仅能上传 PNG JPEG JPG类型图片；建议上传400*300尺寸的图片；最多上传2张
            </div>

            <el-dialog :visible.sync="dialogVisible">
              <img
                width="100%"
                :src="detailForm.picture"
                alt=""
              >
            </el-dialog>
          </el-form-item>
        </el-form>
      </div>
      <!-- 行驶证信息 -->

      <div
        v-else
        :class=" isShowInput ? '' : 'base-info'"
      >
        <el-form
          ref="licenseDataList"
          class="el-form"
          :inline="true"
          :model="licenseForm"
          :rules="licenseRules"
        >
          <el-form-item
            prop="transportCertificateNumber"
            label="行驶证号码："
          >
            <el-input
              v-model="licenseForm.transportCertificateNumber"
              :disabled="showWrite"
            ></el-input>
          </el-form-item>
          <el-form-item
            prop="engineNumber"
            label="发动机号码："
          >
            <el-input
              v-model="licenseForm.engineNumber"
              :disabled="showWrite"
            ></el-input>
          </el-form-item>
          <el-form-item
            prop="registrationDate"
            label="注册时间："
          >
            <el-date-picker
              v-model="licenseForm.registrationDate"
              clearable
              :disabled="showWrite"
            ></el-date-picker>
          </el-form-item>
          <el-form-item
            prop="mandatoryScrap"
            label="强制报废时间："
          >
            <el-date-picker
              v-model="licenseForm.mandatoryScrap"
              clearable
              :disabled="showWrite"
            ></el-date-picker>
          </el-form-item>
          <el-form-item
            prop="overallQuality"
            label="整备质量："
          >
            <el-input
              v-model="licenseForm.overallQuality"
              :disabled="showWrite"
            ></el-input>
          </el-form-item>
          <el-form-item
            prop="mandatoryScrap"
            label="检验有效期："
          >
            <el-date-picker
              v-model="licenseForm.mandatoryScrap"
              clearable
              :disabled="showWrite"
            ></el-date-picker>
          </el-form-item>
          <el-form-item
            prop="expirationDate"
            label="核定载质量："
          >
            <el-input
              v-model="licenseForm.allowableWeight"
              :disabled="showWrite"
            ></el-input>
          </el-form-item>
          <el-form-item
            prop="validityPeriod"
            label="有效期："
          >
            <el-date-picker
              v-model="licenseForm.validityPeriod"
              clearable
              :disabled="showWrite"
            ></el-date-picker>
          </el-form-item>
          <el-form-item
            label="图片信息:"
            style="width: 1200px;"
          >
            <span v-if="!imgUrlList.length">
              <img
                src="../../assets/car-example1.png"
                alt=""
                style="width: 148px;"
              >
              <img
                src="../../assets/car-example2.png"
                alt=""
                style="width: 148px;"
              >
            </span>
            <span v-else>
              <img
                width="148px"
                :src="licenseForm.picture"
                alt=""
                style="display: inline-block;"
              >
              <img
                width="148px"
                :src="licenseForm.picture"
                alt=""
                style="display: inline-block;"
              >
            </span>
            <el-upload
              v-show="show"
              action=""
              list-type="picture-card"
              :disabled="disabled"
              :limit="maxNum"
              :before-upload="beforeAvatarUpload"
              :http-request="uploadCarImage"
              class="elUpload"
            >
              <i
                slot="default"
                class="el-icon-upload2"
              ></i>
            </el-upload>
            <div
              v-show="show"
              style="color: #bac0cd; margin-top: 20px;"
            >注：图片大小不超过5M；仅能上传 PNG JPEG JPG类型图片；建议上传400*300尺寸的图片；最多上传2张
            </div>

            <el-dialog :visible.sync="dialogVisible">
              <img
                width="100%"
                :src="detailForm.picture"
                alt=""
              >
            </el-dialog>
          </el-form-item>
        </el-form>
      </div>
      <el-row
        type="flex"
        justify="center"
      >
        <el-col :span="6">
          <el-button
            v-if="show"
            type="danger"
            @click="updateEdit"
          >保存</el-button>
          <el-button
            v-else
            type="danger"
            @click="editCarDetail"
          >编辑</el-button>
          <el-button
            v-show="show"
            @click="editCancel"
          >取消</el-button>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>
<script>
import { getCarDetail, getCarType, updateCarDetail, getLicenseDetail, updateLicenseDetail } from '@/api/transit'
import COS from 'cos-js-sdk-v5'
export default {
  data() {
    return {

      dialogVisible: false,
      disabled: true,
      maxNum: 2,

      isShowInput: false,

      activeIndex: '1',
      formData: [
        {
          id: '',
          name: ''
        }
      ],
      detailForm: {
        id: '', // 编码
        licensePlate: '', // 车牌
        truckTypeName: '', // 车型
        allowableVolume: 0, // 体积
        allowableLoad: 0, // 载重
        deviceGpsId: '', // GPS
        picture: '', // 图片
        truckTypeId: '' // 车辆类型id
      },
      rules: {
        id: [
          { required: true, message: '请添加车辆编码', trigger: 'blur' }
        ],
        licensePlate: [
          { required: true, message: '请添加车牌号', trigger: 'blur' },
          {
            trigger: 'blur',
            validator: (rule, value, callback) => {
              const reg = /^[\u4e00-\u9fa5][A-Z][0-9A-Z]{5}$/
              if (reg.test(value)) {
                callback()
              } else {
                callback(new Error('请输入正确的车牌号'))
              }
            }
          }
        ],
        truckTypeName: [
          { required: true, message: '请添加车型', trigger: 'blur' }
        ],
        allowableVolume: [
          { required: true, message: '请添加体积', trigger: 'blur' }
          // { min: 1, max: 100, message: '请填写1-100之间的数字', trigger: 'blur' }
        ],
        allowableLoad: [
          { required: true, message: '请添加载重', trigger: 'blur' }
          // { min: 1, max: 100, message: '请填写1-100之间的数字', trigger: 'blur' }
        ],
        deviceGpsId: [
          { required: true, message: '请添加GPS ', trigger: 'blur' },
          { pattern: /^[a-zA-Z0-9]{1,20}$/, message: '请输入1-20位英文或数字', trigger: 'blur' }
        ]
      },
      showWrite: true, // 取消禁用状态
      show: false,
      imgUrlList: [], // 接收上传图片的地址
      imgLicenseList: [], // 接收驾驶证信息的图片地址
      changeShow: true, // 改变显示页面
      // 驾驶证信息
      licenseForm: {
        id: 0, // id
        engineNumber: '', // 发动机编号
        registrationDate: '', // 注册时间
        mandatoryScrap: '', // 强制报废时间
        expirationDate: '', // 检验有效期
        overallQuality: 0, // 整备质量
        allowableWeight: 0, // 核定载质量
        outsideDimensions: '', // 外廓尺寸
        validityPeriod: '', // 行驶证有效期
        transportCertificateNumber: '', // 行驶证号
        picture: '' // 图片
      },
      // 驾驶证规则
      licenseRules: {
        engineNumber: [
          { required: true, message: '请输入发送机编号', trigger: 'blur' }
        ],
        registrationDate: [
          { required: true, message: '请输入注册时间', trigger: 'blur' }
        ],
        mandatoryScrap: [
          { required: true, message: '请输入强制报废时间', trigger: 'blur' }
        ],
        expirationDate: [
          { required: true, message: '请输入检验有效期', trigger: 'blur' }
        ],
        overallQuality: [
          { required: true, message: '请输入整备质量', trigger: 'blur' }
        ],
        allowableWeight: [
          { required: true, message: '请输入核定载质量', trigger: 'blur' }
        ],
        validityPeriod: [
          { required: true, message: '请输入行驶证有效期', trigger: 'blur' }
        ],
        transportCertificateNumber: [
          { required: true, message: '请输入驾驶证号', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getCarDetail()
    this.getCarType()
  },
  methods: {
    // 获取车辆详情
    async getCarDetail() {
      const id = this.$route.query.id
      const res = await getCarDetail(id)
      this.detailForm = res.data
    },
    // 获取车辆类型
    async getCarType() {
      const res = await getCarType()
      this.formData = res.data
    },
    // 车辆编辑详情
    editCarDetail() {
      this.showWrite = false
      this.show = true
      this.disabled = false
      this.isShowInput = true
    },
    // 取消编辑
    editCancel() {
      // 切换回编辑
      this.show = false
      // 禁用状态
      this.showWrite = true
      this.disabled = true
      if (this.changeShow) {
        // 基本信息
        this.$refs.editDataList.resetFields()
        this.isShowInput = false
      } else {
        // 车辆驾驶证信息
        this.$refs.licenseDataList.resetFields()
        this.isShowInput = false
      }
      this.getCarDetail()
      this.getLicenseDetail()
    },
    // 图片上传
    beforeAvatarUpload(file) {
      // 上传模式
      const fileTypeList = ['image/jpeg', 'image/png', 'image/jpg']
      const is5M = file.size / 1024 / 1024 < 5
      if (!is5M) {
        this.$message.error('上传的图片不能超过5M')
      }
      if (!fileTypeList.includes(file.type)) {
        this.$message.error('上传的文件只支持 jpeg, png, jpg 格式！')
      }
      return fileTypeList && is5M
    },
    uploadCarImage(params) {
      // 初始化COS
      const cos = new COS({
        SecretId: 'AKIDQjrmW2LPNNLKJ8mFoFTWLxNahnssgFak',
        SecretKey: '23qPn154Ci7QbdWHuQmz792iCXP4VjjX'
      })
      // 上传方法
      cos.putObject({
        Bucket: 'hrsaas-1318883284',
        Region: 'ap-beijing',
        Key: params.file.name,
        StorageClass: 'STANDARD',
        Body: params.file
      }, (err, data) => {
        if (data.statusCode === 200 && data.Location) {
          // 将数组中的图片路径遍历放在对象中
          if (this.changeShow) {
            this.imgUrlList.push('http://' + data.Location)
            this.$message.success('上传成功')
            this.imgUrlList.map(item => { this.detailForm.picture = item })
            this.imgUrlList.length
          } else {
            this.imgLicenseList.push('http://' + data.Location)
            this.$message.success('上传成功')
            this.imgLicenseList.map(item => { this.licenseForm.picture = item })
          }
        } else {
          this.$message.error(err.Message)
        }
      })
    },
    // 获取基本信息
    information() {
      this.changeShow = true
      // 切换回编辑
      this.show = false
      // 禁用状态
      this.showWrite = true
      this.disabled = true
      this.isShowInput = false
      this.getCarDetail()
    },
    // 获取车辆行驶证信息
    async getLicenseDetail() {
      this.changeShow = false
      this.isShowInput = false
      const id = this.$route.query.id
      const res = await getLicenseDetail(id)
      this.licenseForm = res.data
      // 切换回编辑
      this.show = false
      // 禁用状态
      this.showWrite = true
      this.disabled = true
      this.getCarDetail()
    },
    // 保存更新
    updateEdit() {
      // 判断是基本信息还是驾驶证信息
      if (this.changeShow) {
        // 基本信息
        this.$refs.editDataList.validate(async isOk => {
          if (isOk) {
            await updateCarDetail(this.detailForm)
            this.editCancel()
          }
        })
      } else {
        this.$refs.licenseDataList.validate(async isOk => {
          if (isOk) {
            this.licenseForm.id = this.$route.query.id
            await updateLicenseDetail(this.licenseForm)
            this.editCancel()
          }
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.active {
  color: #ff643d;
}
</style>

<style lang="scss" scoped>
.vehicle-detail {
  ::v-deep .el-container{
    flex-direction: column;
    margin-left: 0px;
  }
  .el-card {
    margin-top: 20px;
    margin-right: 20px;
    border-radius: 5px;
    margin-left: 20px;
    height: 900px;
    .el-form {
      margin-top: 20px;
      height: 680px;
      .el-form-item {
        width: 470px;
        // text-align: center;
        margin-left: 50px;
      }
    }
  }
  .in{
    height: calc(100vh - 205px);
    // height: 100%;
  }
  .aside-box {
    background: #ffffff;
    border-radius: 4px;
    // width: 150px;
    padding: 24px 37px 24px 37px;
    box-sizing: border-box;

    // min-height: calc(100vh - 50px);
    ::v-deep .el-aside {
      padding-bottom: 14px;
      width: 100%!important;
      display: flex;
      background-color: #ffffff;
      border-bottom:1px solid #E5E7EC ;
      text-align: left;
      font-size: 14px;
      .aside-item {
        // margin-top: 38px;
        cursor: pointer;
        &:first-child {
          margin-right: 53px;
          padding-left: 25px;

        }
      }
      .aside-item.active{
        font-size: 16px;
        font-weight: bold;
        color: #20232A;
        &:after{
          content: '';
          display: block;
          background-color:#E15536 ;
          height: 3px;
          width: 49px;
          margin: 0 auto;
          position: relative;
          top: 14px;
        }
      }
    }
  }
}
.base-info ::v-deep .el-input__inner {
  border: none;
  background-color: transparent;
  color: #000;
}
.el-button:hover {
      background-color: #ffeeeb;
      color: #e15536;
      border: #ffeeeb;
}
.elUpload {
  width: 148px;
  position: absolute;
  top: 0;
  left: 300px;
}

</style>
